<template>
    <div class="page-account">
        <div class="container" :class="[fullWidth > 768 ? 'containerSamll' : 'containerBig']">
            <swiper :options="swiperOption" class="swiperPross" v-if="fullWidth > 768">
                <swiper-slide class="swiperPic" v-for="(item, index) in swiperList" :key="index">
                <img :src="item.slide" alt="" />
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
            <div class="index_from page-account-container from-wh">
                <div class="page-account-top">
                    <div class="page-account-top-logo">
                        <img :src="login_logo" alt="logo" style="width: 100%; height: 74px" />
                    </div>
                </div>
                <el-form ref="formInlines" :model="formInline" :rules="ruleInline">
                    <el-form-item prop="account">
                        <el-input
                        type="text"
                        v-model="formInline.account"
                        :prefix-icon="User"
                        placeholder="请输入用户名"
                        size="large"
                        />
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input
                        type="password"
                        v-model="formInline.pwd"
                        :prefix-icon="Key"
                        placeholder="请输入密码"
                        size="large"
                        show-password
                        />
                    </el-form-item>
                    <el-form-item class="pt10">
                        <el-button
                        type="primary"
                        :loading="loading"
                        size="large"
                        @click="handleSubmit()"
                        class="btn"
                        >登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="footer">
            <div class="pull-right" v-if="copyright">{{ copyright }}</div>
            <div class="pull-right" v-else>
                Copyright © 2014-2024 <a href="#" target="_blank">{{ version }}</a>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useMenuStore } from '@/store/module/menu';
import { ElMessage } from 'element-plus';
import { setCookies,getCookies } from '@/utils/cookie';
import { AccountLogin } from '@/api/login';
import { User,Key } from '@element-plus/icons-vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { useWindowSize,onKeyUp } from '@vueuse/core';
import { ref,reactive } from 'vue';
import defaultSwiperList from '@/assets/images/sw.png';
const loading = ref(false);
const isShow = ref(false);
const autoLogin = ref(true);
const imgcode = ref('');
const key = ref('');
const copyright = ref('');
const version = ref('');
const login_logo = ref('');
const login_captcha = ref(0);
const formInlines = ref();
const swiperList = reactive([{ slide: defaultSwiperList }]);
const ruleInline = reactive({
  account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});
const formInline = reactive({
  account: '15829337275',
  pwd: '123456',
});
const swiperOption = reactive({
  pagination: '.swiper-pagination',
  autoplay: true,
});
const menuStore = useMenuStore();
// 监听键盘事件
onKeyUp((e)=>{
    let keycode = e.keyCode;
    if(keycode == 13){
        handleSubmit();
    }
});

function handleSubmit(){
    formInlines.value.validate(async (valid)=>{
        if(valid){
          loading.value = true;
          try{
            let res = await AccountLogin(formInline);
            let data = res.data;
            // 设置登录
            setCookies('token',data.token,864000);
            // 设置菜单
            menuStore.setMenus(data.menus);
          }
          catch(error)
          {
            loading.value = true;
            ElMessage.error(error.msg||'未知错误');
          }
        }
        else{
            console.log('8565456465');
        }
    });
}
const { width:fullWidth, height:fullHeight } = useWindowSize();
</script>
<style scoped lang="scss">
.page-account {
  display: flex;
  width: 100%;
  background-image: url('../../../assets/images/bg.jpg');
  background-size: cover;
  background-position: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: auto;
}

.page-account .code {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-account .code .pictrue {
  height: 40px;
}

.swiperPross {
  border-radius: 12px 0px 0px 12px;
}

.swiperPross, .swiperPic, .swiperPic img {
  width: 510px;
  height: 100%;
}

.swiperPic img {
  width: 100%;
  height: 100%;
}

.container {
  height: 400px !important;
  padding: 0 !important;
  border-radius: 12px;
  z-index: 1;
  display: flex;
}

.containerSamll {
  /* width: 56% !important; */
  background: #fff !important;
}

.containerBig {
  width: auto !important;
  background: #f7f7f7 !important;
}

.index_from {
  padding: 32px 40px 32px 40px;
  height: 400px;
  box-sizing: border-box;
}

.page-account-top {
  padding: 20px 0 24px 0 !important;
  box-sizing: border-box !important;
  display: flex;
  justify-content: center;
}

.page-account-container {
  border-radius: 0px 6px 6px 0px;
}

.btn {
  width: 100%;
  background: linear-gradient(90deg, rgba(25, 180, 241, 1) 0%, rgba(14, 115, 232, 1) 100%) !important;
}

.captchaBox {
  width: 310px;
}

input {
  display: block;
  width: 290px;
  line-height: 40px;
  margin: 10px 0;
  padding: 0 10px;
  outline: none;
  border: 1px solid #c8cccf;
  border-radius: 4px;
  color: #6a6f77;
}

#msg {
  width: 100%;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
}

a:link, a:visited, a:hover, a:active {
  margin-left: 100px;
  color: #0366D6;
}

.index_from :v-deep(.ivu-input-large) {
  font-size: 14px !important;
}

.from-wh {
  width: 400px;
}

.pull-right {
  float: right !important;
}

:v-deep(.el-button--primary) {
  border: none;
}

:v-deep(.el-button) {
  padding: 13px 20px !important;
}

.pull-right {
  float: right !important;
  color: #666;
}

.pull-right a {
  margin-left: 0;
  color: #666;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.8);
  border-top: 1px solid #e7eaec;
  overflow: hidden;
  padding: 10px 20px;
  height: 36px;
  line-height: 18px;
  z-index: 999;
}
</style>